<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>在线充值</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/weui.css"/>
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/index.css"/>
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/setrecharge.css"/>
    <style>
        .zhu{
            background: #7fbbff;
        }
        .czrow{
            padding: 5px;
            display:flex;
            font-size: 14px;
            color: #5f5f5f;
            font-weight: 400;
        }
        .czmd{
            width: 74%;
        }
        .gehu{
            flex:1;
            text-align:right;
            color: #ff0800;
        }
        .weui-actionsheet__title-text{
            padding:10px;
            text-align:center;
        }
        .weui-actionsheet__cell {
            position: relative;
            padding: 10px 0;
            text-align: center;
            font-size: 15px;
            font-weight: 400;
            color: #616161;
        }
    </style>

</head>

<body>
{eq name=":getusersubscribe($info['card_id'],$user['openid'])" value="未关注"}
<div class="follow">
    <span>获取更多信息，请关注公众号</span>
    <button class="weui-btn weui-btn_mini weui-btn_l showIOSDialog2">关注</button>
    <span class="cancel"></span>
</div>
{/eq}
<div class="container cont" id="container">

    <div class="czheader">
        <div>
            帐户余额: {$info['balance']}元
        </div>
    </div>

    <div class="czrow">
        <div class="czmd">充值门店: <span id="merchant" > {$card['merchant']}</span></div>
        <div class="gehu"  id="showIOSActionSheet">更换</div>
    </div>

    <div class="text">
        <div class="left">
            充值金额
        </div>
        <div style="clear:both;"></div>
    </div>
    <div class="jine">

        <form action="" method="post">
            <ul class="clearfix" id="cz" style="padding-bottom: 0;">
                {volist name="czgive" id="vo"}
                <li class="cz {eq name='i' value='1'}p_border{/eq}" data-czid="{$vo['id']}" data-zs_show="{$vo['zs_show']}" data-bonus="{$vo['bonus']}" data-zscardidnew='{:getgivecardnew($vo["zs_card_id_all"],0)}' data-zscardid="{:getgivecard($vo.zs_card_id,0,$vo['zs_card_id_all'])}" data-zs_money="{$vo.zs_money}" data-id="{$vo.cz_money}">{$vo.cz_money}元</li>
                {/volist}
                {eq name="$card['is_cz_qtprice']" value="0"}
                <li class="qita cz">其他金额</li>
                {/eq}
            </ul>
            <div style="display:none;" id="qita">
                <input type="number" name="money" id="money" placeholder="充值金额(元)" min="0.1" max="9999" maxlength="4"/>
                <input type="hidden" name="giveid" id="giveid" value="">
                <input type="hidden" name="mid" id="mid" value="{$user.mid}">
                <input type="hidden" name="outer_mid" id="outer_mid" value="{$user.mid}">
                <input type="hidden" name="openid" id="openid" value="{$user.openid}">
                <input type="hidden" name="orderid" id="orderid" value="">
                <input type="hidden" name="cardid" id="cardid" value="{$info.id}">
                <input type="hidden" name="cardid" id="card_id" value="{$info.card_id}">
                <input type="hidden" name="givetype" id="givetype" value="giverule">
                <input type="hidden" name="is_recharge" id="is_recharge" value="{$card.is_recharge}">
                <input type="hidden" name="is_cz_qtprice" id="is_cz_qtprice" value="{$card.is_cz_qtprice}">
            </div>
            <ol class="weui-cells__title" type="1"  id="czshow">

            </ol>
            {eq name="$card['is_rec_remark']" value="1"}
            <div style="" >
                <input type="text" name="remark" id="remark" placeholder="请输入推荐人"  maxlength="20"/>
            </div>
            {/eq}
            <a href="javascript:;" class="weui-btn weui-btn_primary">充值</a>

        </form>
    </div>

</div>
<!--弹出层begin-->
<div id="dialogs">
    <div class="js_dialog" id="iosDialog2" style="opacity: 1; display: none;">
        <div class="weui-mask">
        </div>
        <div class="weui-dialog">
            <div class="weui-dialog__bd">
                <div class="bgfff chakan" >
                    <img src="#" alt="" style="width:200px;height:200px;"id="picwx">
                    <p class="tex">长安识别二维码,关注公众号.</p>
                </div>
            </div>
            <div class="weui-dialog__ft">

                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确认</a>
            </div>
        </div>
    </div>
</div>
<!--弹出层begin-->
<div id="dialog">
    <div class="js_dialog" id="iosDialog1" style="opacity: 1; display: none;">
        <div class="weui-mask">
        </div>
        <div class="weui-dialog">
            <div class="weui-dialog__bd">
                <div class="bgfff chakan" >
                    <p class="chu">储值账户&nbsp;:&nbsp;<span class="yue">{$info['balance']}</span></p>
                </div>
            </div>
            <div class="weui-dialog__ft">

                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确认</a>
            </div>
        </div>
    </div>
</div>
<!--弹出层begin-->
<div id="dialogt">
    <div class="js_dialog" id="iosDialog3" style="opacity: 1; display: none;">
        <div class="weui-mask">
        </div>
        <div class="weui-dialog">
            <div class="weui-dialog__bd">
                <div class="bgfff chakan" >
                    <p class="lay"></p>
                </div>
            </div>
            <div class="weui-dialog__ft">

                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确认</a>
            </div>
        </div>
    </div>
</div>
<!--弹出层begin-->
<div>
    <div class="weui-mask" id="iosMask" style="display: none"></div>
    <div class="weui-actionsheet" id="iosActionsheet">
        <div class="weui-actionsheet__title">
            <p class="weui-actionsheet__title-text">请选择所在的门店</p>
        </div>
        <div class="weui-actionsheet__menu" id="mech">
            {volist name="machlist" id="vo"}
            <div class="weui-actionsheet__cell merchant" data-id="{$vo.id}">{$vo.merchant}</div>
            {/volist}

        </div>
        <div class="weui-actionsheet__action">
            <div class="weui-actionsheet__cell" id="iosActionsheetCancel">取消</div>
        </div>
    </div>
</div>
<!--弹出层end-->

</body>
<script src="__STATIC_URL__/static/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" id="tpl_dialog">
    $(function(){
        var $iosDialog1 = $('#iosDialog1');
        var $iosDialog2 = $('#iosDialog2');
        $('#dialogs').on('click', '.weui-dialog__btn', function(){
            $(this).parents('.js_dialog').fadeOut(200);
        });
        $('#dialog').on('click', '.weui-dialog__btn', function(){
            $(this).parents('.js_dialog').fadeOut(200);
        });
        $('#dialogt').on('click', '.weui-dialog__btn', function(){
            $(this).parents('.js_dialog').fadeOut(200);
        });
        $('#dialogsr').on('click', '.weui-dialog__btn', function(){
            $(this).parents('.js_dialog').fadeOut(200);
        });
        $('.showIOSDialog1').on('click', function(){
            $iosDialog1.fadeIn(200);
        });
        $('.showIOSDialog2').on('click', function(){
            $iosDialog2.fadeIn(200);
        });

        $(".cancel").click(function(){
            $(this).parent().attr("style","display:none");
        })
    });
</script>
<script>
    // ios
    $(function(){
        var $iosActionsheet = $('#iosActionsheet');
        var $iosMask = $('#iosMask');

        function hideActionSheet() {
            $iosActionsheet.removeClass('weui-actionsheet_toggle');
            $iosMask.fadeOut(200);
        }

        $iosMask.on('click', hideActionSheet);
        $('#iosActionsheetCancel').on('click', hideActionSheet);
        $("#showIOSActionSheet").on("click", function(){
            $iosActionsheet.addClass('weui-actionsheet_toggle');
            $iosMask.fadeIn(200);
        });
        $('#mech').on('click', '.merchant', function (event) {
            var mid=$(this).attr("data-id");
            var mach=$(this).html();
            $("#merchant").html(mach);
            $("#outer_mid").val(mid);
            hideActionSheet();
        })
    });



</script>
<script>
    $(function(){
        var card_id = $('#card_id').val();
        $.ajax({
            type: "POST",
            url: "{:url('cardmarke/getwxqrcode')}",
            data: {
                cardid:card_id
            },
            success: function (data) {

                $("#picwx").attr("src",data.date);

            }
        });
    })
</script>
<script>


</script>
<script type="text/javascript">
    $(function () {
        var a = "true";

        var price = $("#cz").children().eq(0).attr('data-id');
        var zscardid = $("#cz").children().eq(0).attr('data-zscardid');
        var zscardidnew = $("#cz").children().eq(0).attr('data-zscardidnew');
        var bonus=$("#cz").children().eq(0).attr('data-bonus');
        var zsprice = $("#cz").children().eq(0).attr('data-zs_money');
        var czid = $("#cz").children().eq(0).attr("data-czid");
        var zsshow=$("#cz").children().eq(0).attr('data-zs_show');

        $('#money').val(price);
        $("#giveid").val(czid);
        var is_recharge=$("#is_recharge").val();
        var is_cz_qtprice=$("#is_cz_qtprice").val();
        //is_cz_qtprice==0有其他，等于1没有
        if(is_recharge=="0"){

            if(is_cz_qtprice=="0"){
                $("#givetype").val("custom");

                if (a == "true") {
                    $(".qita").addClass("p_border");
                    $("#qita").show();
                    $("#czshow").css("display","none");
                    a = "false";
                } else {
                    $("#qita").hide();
                    a = "true";
                }
            }
        }else{
            $("#czshow").css("display","block");
        }
        if(zscardidnew!=""||zsprice!=0||bonus!=0){
            $("#czshow").append("<li>充值<span>"+ price + "</span>元可获赠 :"+"</li>")
        }
        if(zscardidnew!=""){

            $("#czshow").append("<li> <sanp class='pic qu'>券</sanp>" + zscardid +zscardidnew+ "</li>");
        }
        if(zsprice!=0){
            $("#czshow").append("<li> <sanp class='pic bu'>￥</sanp>送 : " + zsprice + "元</li>");
        }
        if(bonus!=0){
            $("#czshow").append("<li> <sanp class='pic'>积</sanp>积分 :  " + bonus + "</li>");

        }
        if(zsshow!=""){

            $("#czshow").append("<li> <sanp class='pic zhu'>注</sanp>" + zsshow + "</li>");
        }

        $(".sm").click(function () {
            if ($(".chakan").css("display") == "none") {
                $(".chakan").css("display", "block");
            } else {
                $(".chakan").css("display", "none");
            }

        });

        $(".cz").click(function () {
            var id = $(this).attr("data-czid");
            var czid = $(this).attr("data-czid");
            var price = $(this).attr('data-id');
            $("#cz li").removeClass('p_border');
            $("#giveid").val(czid);
            $(this).addClass('p_border');
            $('#money').val(price);
            $("#qita").hide();
            $("#givetype").val("giverule");
            a = "true";
            //赋值显示
            var zscardid = $(this).attr('data-zscardid');
            var zscardidnew = $(this).attr('data-zscardidnew');
            var zsprice = $(this).attr('data-zs_money');
            var bonus=$(this).attr('data-bonus');
            var zsshow=$(this).attr('data-zs_show');

            $("#czshow li").remove();
            $("#givetype").val("giverule");
            if(czid){

                $("#czshow").css("display","block");
                if(zscardidnew!=""||zsprice!=0||bonus!=0){
                    $("#czshow").append("<li>充值<span>"+ price + "</span>元可获赠 :"+"</li>")
                }
                if(zscardidnew!=""){
                    $("#czshow").append("<li> <sanp class='pic qu'>券</sanp>" + zscardid +zscardidnew+ "</li>");
                }
                if(zsprice!=0){
                    $("#czshow").append("<li> <sanp class='pic bu'>￥</sanp>送 : " + zsprice + "元</li>");
                }
                if(bonus!=0){
                    $("#czshow").append("<li> <sanp class='pic'>积</sanp>积分 :  " + bonus + "</li>");

                }
                if(zsshow!=""){

                    $("#czshow").append("<li> <sanp class='pic zhu'>注</sanp>" + zsshow + "</li>");
                }
            }

        })
        $(".qita").click(function () {
            $("#givetype").val("custom");

            if (a == "true") {
                $("#qita").show();
                $("#czshow").css("display","none");
                a = "false";
            } else {
                $("#qita").hide();
                a = "true";
            }

        });

        function getorder(mid) {
            var id = mid;
//            var cardid = $('#cardid').val();
            $.ajax({
                type: "POST",
                url: "{:url('carduser/getorder2')}",

                cache: false,
                async: false,
                data: {
                    id: id,

                },


                success: function (data) {
                    $('#orderid').val(data);

                }
            });
        }

        $(".weui-btn_primary").click(function () {


            var money = $('#money').val();
            var mid = $('#mid').val();
            var zs_money = $('#zs_money').val();
            getorder(mid);
            var openid = $('#openid').val();
            var orderid = $('#orderid').val();
            var cardid = $('#cardid').val();
            var giveid = $('#giveid').val();
            var givetype = $("#givetype").val();
            var remark = $("#remark").val();
            var outer_mid = $("#outer_mid").val();

            if(money>9999){
                $(".lay").html("充值最大金额不能大于9999");
                $("#iosDialog3").fadeIn(200);
                return;
            }
            if(money<0.01){
                $(".lay").html("充值最大金额不能小于0.01");
                $("#iosDialog3").fadeIn(200);

                return;
            }
            $.ajax({
                url: "{:url('carduser/recharge')}",
                type: 'post',
                dataType: 'json',
                data: {
                    zs_money:zs_money,
                    price: money,
                    mid: mid,
                    openid: openid,
                    remark:remark,
                    orderid: orderid,
                    cardid: cardid,
                    giveid: giveid,
                    outer_mid:outer_mid,
                    givetype: givetype
                },


                success: function (data) {

                    // return;
                    if(data.code!=0){
                        $(".lay").html(data.message);
                        $("#iosDialog3").fadeIn(200);
                    }
                    if (typeof WeixinJSBridge == "undefined") {
                        if (document.addEventListener) {
                            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                        } else if (document.attachEvent) {
                            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                        }
                    } else {
                        onBridgeReady(data);
                    }
                }
            })
        })


    })

    function onBridgeReady(sdata) {

        WeixinJSBridge.invoke(
            'getBrandWCPayRequest', sdata,
            function (res) {
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                    paysuccess();
                }     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
            }
        );

    };

    function paysuccess() {

        $.ajax({
            type: "POST",

            url: "{:url('carduser/r_payover')}",

            cache: false,
            dataType: "json",
            async: false,
            data: {
                id:{$user['mid']},
                orderid:$('#orderid').val(),
                cardid: $('#cardid').val(),
            },

            success: function (data) {

                if (data.code == 0) {
                    $(".lay").html(data.message);
                    $("#iosDialog3").fadeIn(200);
                    var url = data.url;
                    if(url!==0){
                        setTimeout(function () {
                            window.location.replace(url);
                        }, 400)
                    }
                } else {
                    $(".lay").html("支付失败");
                    $("#iosDialog3").fadeIn(200);

                }
            },
            error:function (data) {
                $(".lay").html("11支付失败");
            }

        });
    }
</script>
</html>